<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/StakeholderTemplate.xhtml">

    <ui:define name="contentInsert">
        <!--<script type="text/javascript" value="javascript/SeatingPlanLayout.js">
        </script>-->
        
        <script type="text/javascript" language="javascript" src="/adminItem/js_seatingarea/jquery-1.7.js"></script>
        
        <script type="text/javascript">
            //<![CDATA[
            var times = 0;
            
            function select(id){
                obj = document.getElementById(id).src;
                name = obj.substring(obj.lastIndexOf("/") + 1);
                if(name == "AvailableSeat.gif"){
                    document.getElementById(id).src = "./../ticketingsymbols/EmptySpaceSeat.gif";
                }else if(name == "EmptySpaceSeat.gif"){
                    document.getElementById(id).src = "./../ticketingsymbols/AvailableSeat.gif";
                }
            }

            // append row to the HTML table
            function appendRow() {
                var tbl = document.getElementById('my_table'), // table reference
                row = tbl.insertRow(tbl.rows.length),      // append table row
                i;
                // insert table cells to the new row
                if(tbl.rows.length <= 27){
                    for (i = 0; i < tbl.rows[0].cells.length; i++) {
                        if(i == 0){
                            var label = "";
                            if(tbl.rows.length % 26 < 2){
                                label += String.fromCharCode((tbl.rows.length % 26) + 89);
                            }else{
                                label += String.fromCharCode((tbl.rows.length % 26) + 63);
                            }
                            createCell(row.insertCell(i), label, 'row');
                        }else{
                            var name = label + "" + i;
                            createCell2(row.insertCell(i), "./../ticketingsymbols/AvailableSeat.gif", name, 20, 20 , "", 'row');
                        }
                    }
                }else{
                    alert('maximum reached');
                }
            }

            // append column to the HTML table
            function appendColumn() {
                var tbl = document.getElementById('my_table'), // table reference
                i;
                // open loop for each row and append cell
                if(tbl.rows[0].cells.length <= 30){
                    for (i = 0; i < tbl.rows.length; i++) {
                        if(i == 0){
                            createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), (tbl.rows[i].cells.length - 1), 'col');
                        }else{
                            var cellpath = tbl.rows[i].cells[0].innerHTML;
                            var name = cellpath.substring(cellpath.indexOf(">") + 1, cellpath.lastIndexOf("<")) + tbl.rows[i].cells.length;
                            createCell2(tbl.rows[i].insertCell(tbl.rows[i].cells.length), "./../ticketingsymbols/AvailableSeat.gif", name, 20, 20 , "", 'col');
                        }
                    }
                }else{
                    alert('Maximum Columns Reached.');
                }
            }
  
            // create DIV element and append to the table cell
            function createCell(cell, text, style) {
                var div = document.createElement('div'), // create DIV element
                txt = document.createTextNode(text); // create text node
                div.appendChild(txt);                    // append text node to the DIV
                div.setAttribute('class', style);        // set DIV class attribute
                div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
                cell.appendChild(div);                   // append DIV to the table cell
            }

            
            // create DIV element and append to the table cell
            function createCell2(cell, src, id, width, height, alt, style){
                var div = document.createElement('div'),
                img = document.createElement('img');
                img.src = src;
                img.width = 20;
                img.height = 20;
                img.alt = alt;
                img.id = id;
                img.onclick = function(){select(img.id);};
                //alert("<img id=\"" + img.id + "\" value=\"" + img.src + "\" onclick=\"" + img.onclick + "\"" + " width=\"" + img.width + " \" height=\"" + img.height + "\" alt=\"" + img.alt + "\" />");
                div.appendChild(img);                    // append text node to the DIV
                div.setAttribute('class', style);        // set DIV class attribute
                div.setAttribute('className', style);
                cell.appendChild(div);                   // append DIV to the table cell
            }

            // delete table rows with index greater then 0
            function deleteRows() {
                var tbl = document.getElementById('my_table'), // table reference
                lastRow = tbl.rows.length - 1,             // set the last row index
                i;
                // delete rows with index greater then 0
                if(lastRow >= 1){
                    for (i = lastRow; i > lastRow - 1; i--) {
                        tbl.deleteRow(i);
                    }
                }
            }
            
            // delete table columns with index greater then 0
            function deleteColumns() {
                var tbl = document.getElementById('my_table'), // table reference
                lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
                i, j;
                // delete cells with index greater then 0 (for each row)
                if(lastCol >= 1){
                    for (i = 0; i < tbl.rows.length; i++) {
                        for (j = lastCol; j > lastCol - 1; j--) {
                            tbl.rows[i].deleteCell(j);
                        }
                    }
                }
            }
            
            function checkRows(){
                var tbl = document.getElementById('my_table');
                var numrows = tbl.rows.length - 1;
                alert("No. of Rows: " + numrows);
            }
            
            function checkColumns(){
                var tbl = document.getElementById('my_table');
                var numcols = tbl.rows[0].cells.length - 1
                alert("No. of Columns: " + numcols);
            }
            
            function checkSeats(){
                var seats = getNumSeats();
                alert("Number of Seats: " + seats);
            }
            
            function getNumSeats(){
                var tbl = document.getElementById('my_table');
                var seats = 0;
                for(i = 1; i <= tbl.rows.length - 1; i++){
                    for(j = 1; j <= tbl.rows[0].cells.length - 1; j++){
                        var cellpath = tbl.rows[i].cells[0].innerHTML;
                        var name = cellpath.substring(cellpath.indexOf(">") + 1, cellpath.lastIndexOf("<"));
                        var k = name + "" + j;
                        var obj = document.getElementById(k).src;
                        var name = obj.substring(obj.lastIndexOf("/") + 1);
                        if(name == "AvailableSeat.gif"){
                            seats++;
                        }
                    }
                }
                return seats;
            }
            
            function setLayoutEmpty(layoutempty){
                document.getElementById('form1:hiddenEmpty').value = layoutempty;
                //alert("Empty: " + document.getElementById('form1:hiddenEmpty').value);
            }
            
            function setLayoutOccupied(layoutoccupied){
                document.getElementById('form1:hiddenOccupied').value = layoutoccupied;
                //alert("Occupied: " + document.getElementById('form1:hiddenOccupied').value);
            }
            
            function setLayoutRow(layoutrow){
                document.getElementById('form1:hiddenRows').value = layoutrow;
                //alert("Row: " + document.getElementById('form1:hiddenRows').value);
            }
            
            function setLayoutColumn(layoutcolumn){
                document.getElementById('form1:hiddenColumns').value = layoutcolumn;
                //alert("Columns: " + document.getElementById('form1:hiddenColumns').value);
            }
            
            function addSeatLayout(showIds, areaname, cost, cpage){
                //alert(cpage);
                var tbl = document.getElementById('my_table');
                var layoutid = '', layoutrow = '', layoutcolumn = '', layoutoccupied = '', layoutempty = '';
                var i, j;
                for(i = 1; i <= tbl.rows.length - 1; i++){
                    for(j = 1; j <= tbl.rows[0].cells.length - 1; j++){
                        var cellpath = tbl.rows[i].cells[0].innerHTML;
                        var alpha = cellpath.substring(cellpath.indexOf(">") + 1, cellpath.lastIndexOf("<"));
                        var idname = alpha + "" + j;
                        var obj = document.getElementById(idname).src;
                        var imgname = obj.substring(obj.lastIndexOf("/") + 1);
                        var isEmpty = "";
                        layoutid += idname;
                        layoutrow += alpha + ";";
                        layoutcolumn += j + ";";
                        layoutoccupied += 0 + ";";
                        if(imgname == "AvailableSeat.gif"){
                            isEmpty += "F";
                        }else{
                            isEmpty += "T";
                        }
                        layoutempty += isEmpty + ";";
                    }
                    layoutrow += ";";
                    layoutcolumn += ";";
                    layoutoccupied += ";";
                    layoutempty += ";";
                }
                layoutrow += ";";
                layoutcolumn += ";";
                layoutoccupied += ";";
                layoutempty += ";";
                setLayoutOccupied(layoutoccupied);
                setLayoutRow(layoutrow);
                setLayoutEmpty(layoutempty);
                setLayoutColumn(layoutcolumn);
                //alert("ID: " + layoutid + " row: " + layoutrow + " column: " + layoutcolumn + " occupied: " + layoutoccupied + " empty: " + layoutempty);
                /*prompt("Hello", "hiddenOccupied=" + document.getElementById('form1:hiddenOccupied').value + "&hiddenRows=" + document.getElementById('form1:hiddenRows').value + "&hiddenColumns=" + document.getElementById('form1:hiddenColumns').value + "&hiddenEmpty=" + document.getElementById('form1:hiddenEmpty').value + "&cost=" + cost
                          + "&areaname=" + areaname + "&showIds=" + showId);*/
                
                //document.getElementById('form1:hiddenBtn').click();
                var numseats = getNumSeats();
                if(numseats <= 0){
                    alert("no seats selected!");
                }else{
                    $.ajax({
                        type: "GET",
                        url: "#{stakeholderPerformanceMB.getServletControlURL()}",
                        data: "hiddenOccupied=" + document.getElementById('form1:hiddenOccupied').value + "&hiddenRows=" + document.getElementById('form1:hiddenRows').value + "&hiddenColumns=" + document.getElementById('form1:hiddenColumns').value + "&hiddenEmpty=" + document.getElementById('form1:hiddenEmpty').value + "&cost=" + cost
                              + "&areaname=" + areaname + "&ids=" + showIds + "&cpage=" + cpage,
                        complete: function(result){
                            alert(result.responseText);
                        }
                    })
                    //alert("jQuery.ajax done");
                }
                return false;
                
            }
            
            //]]>
            
        </script>
   <h3>Add Selected Area from Show</h3>
            <p:layoutUnit position="center" header="Add new Area for Event #{stakeholderPerformanceMB.selectedEvent} at #{stakeholderPerformanceMB.showTiming}(Show ID: #{stakeholderPerformanceMB.selectedShowId})" scrollable="true">
                <h:panelGrid>
                    <h4>Area Info</h4>
                    <hr/>
                    <h:outputText value="Area Name: #{stakeholderPerformanceMB.areaName}"/>
                    <h:outputText value= "Cost $ #{stakeholderPerformanceMB.cost}">
                        <f:convertNumber pattern="0.00" currencySymbol="$" type="currency"/>
                    </h:outputText>
                </h:panelGrid>
                <p:panel style="background: #c2dfef;">
                    <h:outputText value="Points to Notice: " style="font-family:verdana; font-size:small ; color: #004276; font-weight: bold"/> <br/>
                    <h:outputText value="1. Please ensure that there are seats created. Otherwise there will be an error." style="font-family:verdana; font-size: small; color: #004276; "/><br/>
                    <h:outputText value="2. You can make the seat empty by clicking on the seat itself." style="font-family:verdana; font-size: small; color: #004276; "/><br/>
                    <h:outputText value="3. Please note that the columns are always numbers and the rows always consists of letters." style="font-family:verdana; font-size: small; color: #004276; "/><br/>
                    <h:outputText value="4. Please note that only a maximum of 26 Rows and 30 Columns are allowed." style="font-family:verdana; font-size: small; color: #004276; "/><br/>
                </p:panel>
                <hr/>
                <h:form id="form1">
                    <input type="button" value="Add Row" onclick="appendRow()"/>
                    <input type="button" value="Add Column" onclick="appendColumn()"/>
                    <input type="button" value="Delete Row" onclick="deleteRows()"/>
                    <input type="button" value="Delete Column" onclick="deleteColumns()"/>
                    <input type="button" value="Delete Both Row and Column" onclick="deleteColumns();deleteRows()"/>
                    <input type="button" value="Check Number of Rows" onclick="checkRows()"/>
                    <input type="button" value="Check Number of Columns" onclick="checkColumns()"/>
                    <input type="button" value="Check Total Number of Seats" onclick="checkSeats()"/>
                    <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
                        <!--<p:column>-->
                        <tbody>
                            <tr>
                                <td>&nbsp;</td>
                                <td>
                                    <h:panelGrid width="100%" bgcolor="yellow">
                                        <p:column>
                                            <div align="center">STAGE</div>
                                        </p:column>
                                    </h:panelGrid>
                                    <table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td nowrap="nowrap" valign="top" align="center">Row/Column</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <hr/>
                    <h:inputHidden immediate="true" id="hiddenEmpty" value="#{stakeholderPerformanceMB.areaSeatEmpty}"/>
                    <h:inputHidden immediate="true" id="hiddenRows" value="#{stakeholderPerformanceMB.areaSeatRow}"/>
                    <h:inputHidden immediate="true" id="hiddenColumns" value="#{stakeholderPerformanceMB.areaSeatColumn}"/>
                    <h:inputHidden immediate="true" id="hiddenOccupied" value="#{stakeholderPerformanceMB.areaSeatOccupied}"/>
                    <input type="button" value="Add Area" onclick="if (!confirm('Are you sure you want to create new event?')) return false; addSeatLayout(#{stakeholderPerformanceMB.selectedShowId}, '#{stakeholderPerformanceMB.areaName}', '#{stakeholderPerformanceMB.cost}', 'add');" />
                </h:form>
            </p:layoutUnit>
        </ui:define>
</ui:composition>

